<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/">订单</a></el-breadcrumb-item>
                <el-breadcrumb-item>退货原因设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <el-card class="box-card">
                <div class="card-header">
                    <span>
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        数据列表</span>
                    <el-button class="button" text @click="AdminAddFrom">添加</el-button>
                </div>
            </el-card>
        </div>
        <el-table style="width: 100%" :border="true">
            <el-table-column type="selection" width="50">


            </el-table-column>
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="属性名称" />
            <el-table-column prop="sort" label="商品类型" width="180" />
            <!-- 自定义列模板 -->
            <el-table-column label="属性是否可选">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <el-switch @click="changeGoodsStatus(scope.row)" :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="属性值的录入方式">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <div>
                        {{ scope.row.createTime
                            ? dayjs(scope.row.createTime
                            ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="可选值列表" flex="right">
                <template #default="scope">
                    <el-button @click="changeGoods(scope.row)">编辑</el-button>
                    <el-button @click="delList(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="排序" flex="right">
                <template #default="scope">
                    <el-button @click="changeGoods(scope.row)">编辑</el-button>
                    <el-button @click="delList(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" flex="right">
                <template #default="scope">
                    <el-button @click="changeGoods(scope.row)">编辑</el-button>
                    <el-button @click="delList(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="footer" style="margin-top: 30px;">

        <el-select class="m-2" v-model="value" placeholder="批量删除">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>




        <!-- 分页器 -->
        <el-pagination style="float: right;" v-model:current-page="pagination.pageNum"
            v-model:page-size="pagination.pageSize" background :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>


<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from "vue"
import { Tickets } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../request/api'
import Edit from "./AttributeListAdd.vue"
import type { Ref } from "vue"
import { IAddReturnGoods, IAdminListItem } from "../../request/QmsAdminConreiller/index"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from "vue-router"
let router = useRouter()
// 批量处理的数据绑定
const value = ref('')
// 表单元素
let formData = ref({}) as Ref<IAddReturnGoods>
let Adminname = useRoute().query
let modalForm = ref({}) as Ref<IAdminListItem>

// 分页器
let { tableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.admin.AttributeList, {
    cid: Number(Adminname?.cid),
    type: Number(Adminname?.type)
})


console.log(tableData);


console.log(Adminname);

let options = [
    {
        value: "删除",
        label: '删除'
    }
]


let add = true
// 添加按钮
let onShowEdit = () => {
    let obj = {
        name: "",
        status: 0,
        sort: 0
    } as IAddReturnGoods
    formData.value = obj
    showEdit.value = true
    add = true
}
let showEdit = ref(false)
// 添加退货原因
let closeEdit = () => {
    showEdit.value = false
}
// 修改按钮
let changeGoods = (val: IAddReturnGoods) => {
    formData.value = val
    showEdit.value = true
    add = false
}


// 单个删除
let delList = async (val: IAddReturnGoods) => {
    await api.admin.delRouterGoods(val.id)
    location.reload()
}


// 修改状态
let changeGoodsStatus = async (val: IAddReturnGoods) => {
    val.status = val.status == 1 ? 0 : 1
    await api.admin.changeReturnGoodsStatus({ ids: val.id, status: val.status })
}


// 修改和新增
let onConfirmDialog = (row: IAddReturnGoods) => {
    console.log(row);  // row就是表单数据
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            console.log(row);
            row.sort = Number(row.sort);
            // 发请求
            // 去判断 是 编辑 还是添加
            if (add) {
                // row.status = row.status
                await api.admin.addReturnGoods(row)
            } else {
                await api.admin.changeReturnGoods(row)
            }
            showEdit.value = false
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            location.reload()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
let AdminAddFrom = () => {
    router.push("/pms/AttributeListAdd")

}
</script>


<style scoped lang="scss">
.bread {
    // position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}


.card {
    margin-top: 60px;
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-card {
    margin-bottom: 40px;
}

:deep .cell {
    text-align: center;
}
</style>